<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>绘制图像</title>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>

<script>

  function init() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    var img = new Image();
    img.src = 'http://img2.imgtn.bdimg.com/it/u=186501607,916790227&fm=206&gp=0.jpg';
    img.onload = function () {
      // ctx.drawImage(img, 0, 0);
      var patten = ctx.createPattern(img,'repeat');
      ctx.fillStyle = patten;

      // 切割
      ctx.beginPath();
      ctx.arc(150,150,150,0,Math.PI*2,true);

      ctx.clip();

      // ctx.shadowColor = '#666';
      // ctx.shadowOffsetY = 10;
      // ctx.shadowBlur = 12;

      ctx.fillRect(0,0,500,500);
    };
  }

  window.addEventListener('load', init, false);

</script>
</body>
</html>